<template>
  <div class="p-5">
    <el-card shadow="never">
      <el-row justify="space-between">
        <el-col :span="18" :xs="24">
          <div class="flex h-full items-center">
            <div>
              <p>{{ greetings }}</p>
              <p class="text-sm text-gray">暂无消息</p>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-card style="width: 100%" class="mt-5" shadow="never">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="WA个人版账号统计" name="1" v-if="isHas.WA">
          <el-row v-if="activeNames.includes('1')">
            <el-col :span="24">
                  <Item app="WA" bundle="net.whatsapp.WhatsApp" :isAdmin="isAdmin" :userList="userList"/>
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item title="WA商务版账号统计" name="2" v-if="isHas.WA">
          <el-row v-if="activeNames.includes('2')">
            <el-col :span="24">
                  <Item app="WA" bundle="net.whatsapp.WhatsAppSMB" :isAdmin="isAdmin" :userList="userList"/>
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item title="TG账号统计" name="3" v-if="isHas.TG">
          <el-row v-if="activeNames.includes('3')">
            <el-col :span="24">
                  <Item app="TG" :isAdmin="isAdmin" :userList="userList"/>
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item title="VIBER账号统计" name="4" v-if="isHas.VIBER">
          <!-- <el-row v-if="activeNames.includes('4')"> -->
            <!-- <el-col :span="24"> -->
              <div style="width: 100%;" v-if="activeNames.includes('4')">
                <Item app="VIBER" :isAdmin="isAdmin" :userList="userList"/>
              </div>
            <!-- </el-col> -->
          <!-- </el-row> -->
        </el-collapse-item>
      </el-collapse>
    </el-card>


    <el-row :gutter="10" v-if="false">
      <el-col :span="24" v-if="isHas.WA">
        <el-card style="width: 100%" class="mt-5" shadow="never">
            <Item app="WA" bundle="net.whatsapp.WhatsApp" :isAdmin="isAdmin" :userList="userList"/>
        </el-card>
      </el-col>

      <el-col :span="24" v-if="isHas.WA">
        <el-card style="width: 100%" class="mt-5" shadow="never">
            <Item app="WA" bundle="net.whatsapp.WhatsAppSMB" :isAdmin="isAdmin" :userList="userList"/>
        </el-card>
      </el-col>

      <el-col :span="24" v-if="isHas.TG">
        <el-card style="width: 100%" class="mt-5" shadow="never">
            <Item app="TG" :isAdmin="isAdmin" :userList="userList"/>
        </el-card>
      </el-col>

      <el-col :span="24" v-if="isHas.VIBER">
        <el-card style="width: 100%" class="mt-5" shadow="never">
            <Item app="VIBER" :isAdmin="isAdmin" :userList="userList"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import Item from './item.vue'
import { listApi } from '@/api/user/index.api'
import { useUserStore } from "@/store/modules/user.store";

const userStore = useUserStore();

const isAdmin = computed(() => {
  return userStore?.userInfo?.role === 'admin'
})

const activeNames = ref([])

const isHas = computed(() => {
  const result = {}
  userStore?.userInfo?.permission?.children?.map(item => {
    if(item.name === "res.WA") {
      result.WA = item.checked
    }
    if(item.name === "res.TG") {
      result.TG = item.checked
    }
    if(item.name === "res.VIBER") {
      result.VIBER = item.checked
    }
  })
  return result
})

const userList = ref([])
const getUserList = () => {
  if(isAdmin.value) {
    listApi({
      page: 1,
      size: 500,
    }).then(res => {
      userList.value = res.rows
    })
  }
}

onMounted(() => {
  getUserList()
})

const date = new Date();
const greetings = computed(() => {
  const hours = date.getHours();
  if (hours >= 6 && hours < 8) {
    return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
  } else if (hours >= 8 && hours < 12) {
    return "上午好，" + userStore.userInfo.username + "！";
  } else if (hours >= 12 && hours < 18) {
    return "下午好，" + userStore.userInfo.username + "！";
  } else if (hours >= 18 && hours < 24) {
    return "晚上好，" + userStore.userInfo.username + "！";
  } else {
    return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！";
  }
});
</script>

<style lang="scss" scoped>

</style>
